<template>
  <div>
    <el-table
      :data="orderData"
      ref="orderData"
      @selection-change="handlerSelectionChange"
      border>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号" width="50px">
        <template v-slot="scope">
          <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderid"
        label="订单编号"
        fixed="left">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
      <el-table-column
        label="订单商品信息">
        <el-table-column
          prop="goodsid"
          label="商品编号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="kind"
          label="商品种类">
        </el-table-column>
        <el-table-column
          prop="number"
          label="购买数量">
        </el-table-column>
        <el-table-column
          prop="price"
          label="商品单价">
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          label="商品总价">
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="收货信息">
        <el-table-column
          prop="person"
          label="收货人">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="收货电话">
        </el-table-column>
        <el-table-column
          prop="address"
          label="收货地址">
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="status"
        label="订单状态"
        :filters="[{ text: '未发货', value: '未发货' }, { text: '运输中', value: '运输中' },{ text: '已收货', value: '已收货' }]"
        :filter-method="filterTag"
      >
        <template v-slot="scope">
          <el-tag
            :type="scope.row.status === '未发货' ? 'warning' : scope.row.status === '运输中' ? 'primary':'success'"
            disable-transitions>{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="did"
        label="买家id">
      </el-table-column>
      <el-table-column
        prop="cid"
        label="借卖方id">
      </el-table-column>
      <el-table-column
        prop="wareid"
        label="仓库id">
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="change(scope.$index,scope.row)" :disabled='scope.row.status!="未发货"'>提醒发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="allChange"
               style="margin-top: 15px" :disabled="this.selectItems.length==0">一键提醒</el-button>
    <div class="pagination" style="margin-top:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, sizes, pager, next,jumper"
        :current-page.sync="pageParams.pageNum"
        :page-size="pageParams.pageSize"
        :page-sizes="[10,20,50,100]"
        :total="orderData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "order",
  data(){
    return{
      orderData:[
        {
          orderid:'1001',
          date:'2020-4-20',
          goodsid:'001',
          name:'方便面',
          kind:'食品烟酒',
          number:10,
          price:35,
          totalPrice:350,
          did:'买家id',
          cid:'借卖方id',
          wareid:'仓库id',
          status:'未发货',
          person:'王先生',
          phone:'19909890978',
          address:'上海市静宁路111号'
        },
        {
          orderid:'1001',
          date:'2020-4-20',
          goodsid:'001',
          name:'方便面',
          kind:'食品烟酒',
          number:10,
          price:35,
          totalPrice:350,
          did:'买家id',
          cid:'借卖方id',
          wareid:'仓库id',
          status:'运输中',
          person:'王先生',
          phone:'19909890978',
          address:'上海市静宁路111号'
        },
        {
          orderid:'1001',
          date:'2020-4-20',
          goodsid:'001',
          name:'方便面',
          kind:'食品烟酒',
          number:10,
          price:35,
          totalPrice:350,
          did:'买家id',
          cid:'借卖方id',
          wareid:'仓库id',
          status:'已收货',
          person:'王先生',
          phone:'19909890978',
          address:'上海市静宁路111号'
        }
      ],
      selectItems:[],
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageParams.pageNum = 1;
      this.pageParams.pageSize = val;
    },

    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
    },
    filterTag(value, row) {
      return row.status === value;
    },
    handlerSelectionChange(val){
      this.selectItems = val;
      /*      console.log(val);*/},
    change(index,row)
    {
      this.$confirm(row.name+'确认提醒?', '提醒操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        //发送发货请求
        /*this.putRequest('/仓库商品上架请求',data).then(res=>{
        if(res)
        {
            row.status = '已上架';
            this.$message({
            type: 'success',
            message: '上架成功!'
        }
      })
        * */
        this.$message({
          type: 'success',
          message: '已提醒供货商发货'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提醒'
        });
      });
    },
    allChange()
    {
      this.$confirm('确认全部提醒供货商发货?', '全部提醒操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        /*this.putRequest('/仓库商品上架请求',data,ids).then(res=>{
        if(res)
        {
            row.status = '已上架';
            this.$message({
            type: 'success',
            message: '上架成功!'
        }
      })
        * */
          this.$message({
            type: 'success',
            message: '批量提醒成功!'
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消全部提醒'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
